import { Row, Col } from 'antd';
import StatisticCenter from './elements/StatisticCenter'
import StartWf from './elements/startWf';
import Analysis from './elements/analysis';
import FeedBackWf from './elements/feedbackWf';
import ReturnedWf from './elements/returnedWf';
import Backlog from './elements/backlog';
import AttentionWf from './elements/attentionWf';
import SuperviseWf from './elements/superviseWf';
import { inject, observer } from 'mobx-react';

@inject('wfCenterStore')
@observer
class Main extends React.Component{
  componentWillMount() {
    const { getLayoutInfo, saveLocation } = this.props.wfCenterStore;
    getLayoutInfo();
  }
  componentWillReceiveProps(nextProps) {
    if(this.props.location.key !== nextProps.location.key) {
      const { getLayoutInfo, clearStore } = this.props.wfCenterStore;
      clearStore();
      getLayoutInfo();
    }
  }
  shouldComponentUpdate(nextProps,nextState) {
      return true;
  }
  componentWillUnmount(){
    const { clearStore } = this.props.wfCenterStore;
    clearStore();
  }
  render() {
    const { layoutInfo={} } = this.props.wfCenterStore;
    let location = this.props.location;
    return(
      <div className='wf-center-container'>
        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@2gofeq`}>
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@kj2xz9`} span={24}>
            <StatisticCenter ecId={`${this && this.props && this.props.ecId || ''}_StatisticCenter@su1r0g`} location={location}/>
          </Col>
        </Row>
        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@ri8uyj`}>
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@p7xzdi`} span={8}>
            <StartWf ecId={`${this && this.props && this.props.ecId || ''}_StartWf@zxxjzk`} location={location}/>
          </Col>
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@2ewfvh`} span={8}>
            <ReturnedWf ecId={`${this && this.props && this.props.ecId || ''}_ReturnedWf@rjvjvz`} location={location}/>
          </Col>
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ht8mun`} span={8}>
            <Analysis ecId={`${this && this.props && this.props.ecId || ''}_Analysis@xh2916`} location={location}/>
          </Col>
        </Row>
        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@wxkkop`}>
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@cy04n9`} span={layoutInfo.openFlowRes? 15 : 24}>
            <Backlog ecId={`${this && this.props && this.props.ecId || ''}_Backlog@x4pbi6`} location={location}/>
          </Col>
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@80apox`} span={layoutInfo.openFlowRes? 9: 0}>
            <FeedBackWf ecId={`${this && this.props && this.props.ecId || ''}_FeedBackWf@0cz04a`} location={location}/>
          </Col>
        </Row>
        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@eg4kr5`}>
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@15nom3`} span={15}>
            <AttentionWf ecId={`${this && this.props && this.props.ecId || ''}_AttentionWf@ffca7s`} location={location}/>
          </Col>
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ps17od`} span={9}>
            <SuperviseWf ecId={`${this && this.props && this.props.ecId || ''}_SuperviseWf@p9282s`} location={location}/>
          </Col>
        </Row>
      </div>
    ) 
    
  }
}

export default Main